<template>
  <!-- 全局弹窗容器 -->
  <div class="global-dialogs-container">
    <!-- 游戏结束弹窗 -->
    <GameOverDialog
      v-model="state.gameOverVisible.value"
      :game-data="state.gameOverData.value"
      @close="handleGameOverClose"
    />

    <!-- 账号资源不足弹窗 -->
    <ResourceInsufficientDialog
      v-model="state.resourceInsufficientVisible.value"
      @close="handleResourceInsufficientClose"
      @recharge="handleResourceInsufficientRecharge"
    />
  </div>
</template>

<script setup>
import { reactive, onMounted, watch } from "vue";
import GameOverDialog from "./GameOverDialog.vue";
import CloseClientDialog from "./CloseClientDialog.vue";
import ResourceInsufficientDialog from "./ResourceInsufficientDialog.vue";
import dialogManager from "@/utils/dialogManager.js";

// 获取弹窗管理器的响应式状态
const state = dialogManager.getReactiveState();

// 组件挂载时显式隐藏游戏结束弹窗
onMounted(() => {});

// 处理游戏结束弹窗关闭
const handleGameOverClose = () => {
  dialogManager.hideGameOverDialog();
};

// 处理关闭客户端弹窗关闭
const handleCloseClientClose = (status) => {
  dialogManager.hideCloseClientDialog();
};

// 处理账号资源不足弹窗关闭
const handleResourceInsufficientClose = () => {
  dialogManager.hideResourceInsufficientDialog();
};

// 处理账号资源不足弹窗充值按钮点击
const handleResourceInsufficientRecharge = () => {
  dialogManager.handleResourceInsufficientRecharge();
};
</script>

<style scoped>
.global-dialogs-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.global-dialogs-container :deep(*) {
  pointer-events: auto;
}
</style>
